<script src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
	$(function() {
		var roomStyles = [];
		var bedroom = 0, parlor = 0, bathroom = 0, kitchen = 0, aisle = 0, storage = 0, balcony = 0, entrance = 0;
		var s = "";
		var roomId = 0;
		$("#rdoFrontWall").attr("checked",'1');
		$("#rdoBackWall").attr("checked",'1');
		$("#rdoLeftWall").attr("checked",'1');
		$("#rdoRightWall").attr("checked",'1');
		
		$("input[name='rdoFrontWall']").click(
		function(){
		     var item = $("input[name='rdoFrontWall']:checked").val();
		     if(item==0){
		     	$('#fwwidth').val(0);
		     	$('#fwthick').val(0);
		     	$('#fwX').val(0);
		     	$('#fwZ').val(0);
		     	$('#fwY').val(0);
		     	
		     	$('#fwwidth').attr("disabled",true);
		     	$('#fwX').attr("disabled",true);
		     	$('#fwZ').attr("disabled",true);
		     	$('#fwY').attr("disabled",true);
		     }else{
				$('#fwwidth').val($("#width").val());
				$('#fwthick').val(2);
				$('#fwX').val($("#X").val());
				$('#fwZ').val(parseInt($("#Z").val())-parseInt($("#depth").val())/2-parseInt($('#fwthick').val())/2);
				$('#fwY').val(101);
				
		     	$('#fwX').attr("disabled",false);
		     	$('#fwZ').attr("disabled",false);
		     	$('#fwY').attr("disabled",false);				
		     	$('#fwwidth').attr("disabled",false); 
		     }
		});
		
	$("input[name='rdoBackWall']").click(
		function(){
		     var item = $("input[name='rdoBackWall']:checked").val();
		     if(item==0){
		     	$('#bwwidth').val(0);
		     	$('#bwthick').val(0);
		     	$('#bwX').val(0);
		     	$('#bwZ').val(0);
		     	$('#bwY').val(0);

		     	$('#bwwidth').attr("disabled",true);
		     	$('#bwX').attr("disabled",true);
		     	$('#bwZ').attr("disabled",true);
		     	$('#bwY').attr("disabled",true);
		     }else{
				$('#bwwidth').val($("#width").val());
				$('#bwthick').val(2);
				$('#bwX').val($("#X").val());
				$('#bwZ').val(parseInt($("#Z").val())+parseInt($("#depth").val())/2+parseInt($('#fwthick').val())/2);
				$('#bwY').val(101);
				
		     	$('#bwX').attr("disabled",false);
		     	$('#bwZ').attr("disabled",false);
		     	$('#bwY').attr("disabled",false);				
		     	$('#bwwidth').attr("disabled",false); 
		     }
		});

	$("input[name='rdoLeftWall']").click(
		function(){
		     var item = $("input[name='rdoLeftWall']:checked").val();
		     if(item==0){
		     	$('#lwwidth').val(0);
		     	$('#lwthick').val(0);
		     	$('#lwX').val(0);
		     	$('#lwZ').val(0);
		     	$('#lwY').val(0);
		     	$('#lwwidth').attr("disabled",true);
		     	$('#lwX').attr("disabled",true);
		     	$('#lwZ').attr("disabled",true);
		     	$('#lwY').attr("disabled",true);
		     }else{
				$('#lwwidth').val(2);
				$('#lwthick').val($("#depth").val());
				$('#lwX').val(parseInt($("#X").val())-parseInt($("#width").val())/2-parseInt($('#lwwidth').val())/2);
				$('#lwZ').val($("#Z").val());
				$('#lwY').val(101);
				
		     	$('#lwX').attr("disabled",false);
		     	$('#lwZ').attr("disabled",false);
		     	$('#lwY').attr("disabled",false);				
		     	$('#rwthick').attr("disabled",false); 
		     }
		});

	$("input[name='rdoRightWall']").click(
		function(){
		     var item = $("input[name='rdoRightWall']:checked").val();
		     if(item==0){
		     	$('#rwwidth').val(0);
		     	$('#rwthick').val(0);
		     	$('#rwX').val(0);
		     	$('#rwZ').val(0);
		     	$('#rwY').val(101);
		     	$('#rwwidth').attr("disabled",true);
		     	$('#rwX').attr("disabled",true);
		     	$('#rwZ').attr("disabled",true);
		     	$('#rwY').attr("disabled",true);
		     }else{
				$('#rwwidth').val(2);
				$('#rwthick').val($("#depth").val());
				$('#rwX').val(parseInt($("#X").val())+parseInt($("#width").val())/2+parseInt($('#rwwidth').val())/2);
				$('#rwZ').val($("#Z").val());
				$('#fwY').val(101);
				
		     	$('#rwX').attr("disabled",false);
		     	$('#rwZ').attr("disabled",false);				
		     	$('#rwY').attr("disabled",false);
		     	$('#rwthick').attr("disabled",false); 
		     }
		});
						
		$('#addRoom').click(function() {
			if($('#width').val().length == 0) {
				$('#desc1').append('didnt get any width');
				return;
			}
			if($('#depth').val().length == 0) {
				$('#desc2').append('didnt get any depth');
				return;
			}
			if($('#X').val().length == 0) {
				$('#desc3').append('didnt get any left');
				return;
			}
			if($('#Z').val().length == 0) {
				$('#desc4').append('didnt get any top');
				return;
			}
			roomId++;
			var rs = {
				structure:[{type:'floor',
							x:parseInt($('#X').val()),
							y:parseInt($('#Y').val()),
							z:parseInt($("#Z").val()),
							width : parseInt($("#width").val()),
							depth : parseInt($("#depth").val())
						},
						{type:'ceiling',
							x:parseInt($('#X').val()),
							y:parseInt($('#Y').val())+200,
							z:parseInt($("#Z").val()),
							width : parseInt($("#width").val()),
							depth : parseInt($("#depth").val())
						},
						{type:'fwall',
							x:parseInt($('#fwX').val()),
							y:parseInt($('#fwY').val()),
							z:parseInt($("#fwZ").val()),
							width : parseInt($("#fwwidth").val()),
							depth : parseInt($("#fwthick").val())
						},
						{type:'bwall',
							x:parseInt($('#bwX').val()),
							y:parseInt($('#bwY').val()),
							z:parseInt($("#bwZ").val()),
							width : parseInt($("#bwwidth").val()),
							depth : parseInt($("#bwthick").val())
						},						
						{type:'lwall',
							x:parseInt($('#lwX').val()),
							y:parseInt($('#lwY').val()),
							z:parseInt($("#lwZ").val()),
							width : parseInt($("#lwwidth").val()),
							depth : parseInt($("#lwthick").val())
						},
						{type:'rwall',
							x:parseInt($('#rwX').val()),
							y:parseInt($('#rwY').val()),
							z:parseInt($("#rwZ").val()),
							width : parseInt($("#rwwidth").val()),
							depth : parseInt($("#rwthick").val())
						}					
						],
				// position : {
					// x : parseInt($("#X").val()),
					// x : parseInt($("#Y").val()),
					// z : parseInt($("#Z").val())
				// },
				// size : {
					// width : parseInt($("#width").val()),
					// depth : parseInt($("#depth").val())
				// },
				"roomType" : parseInt($("#type option:selected").val()),
				"roomId" : roomId,
				"description":$("#desc").val()
			};
			console.warn(rs);
			roomStyles.push(rs);
			s = "增加了一间" + $("#type option:selected").text() + "," + "长：" + $("#width").val() + "cm;" + "宽：" + $("#depth").val() + "cm;" + "X：" + $("#X").val() + "cm;" + "Z：" + $("#Z").val() + "cm"
				+" 描述："+$("#desc").val()+";<br>";
			$('.output').append(s);

			switch($("#type option:selected").val()) {
				case "1":
					bedroom += 1;
					break;
				case "2":
					parlor += 1;
					break;
				case "3":
					bathroom += 1;
					break;
				case "4":
					kitchen += 1;
					break;
				case "5":
					aisle += 1;
					break;
				case "6":
					storage += 1;
					break;
				case "7":
					balcony += 1;
					break;
				case "8":
					entrance += 1;
					break;
			}

		});
		$('#ok').click(function() {
			houseTypeId = "";
			houseTypeName = "";
			if(bedroom != 0) {
				houseTypeName += bedroom + "室";
			}
			if(parlor != 0) {
				houseTypeName += parlor + "厅";
			}
			if(bathroom != 0) {
				houseTypeName += bathroom + "卫";
			}
			if(kitchen != 0) {
				houseTypeName += kitchen + "厨";
			}
			if(aisle != 0) {
				houseTypeName += aisle + "廊";
			}
			if(storage != 0) {
				houseTypeName += storage + "储";
			}
			if(balcony != 0) {
				houseTypeName += balcony + "台";
			}
			if(entrance != 0) {
				houseTypeName += entrance + "玄";
			}
			houseTypeId = bedroom + "" + parlor + "" + bathroom + "" + kitchen + "" + aisle + "" + storage;

			$.post("index.php?r=webgl/saveHouseStyle",{'description':$("#descHouse").val(),'roomStyles':roomStyles,'houseType':houseTypeId},function(){
			alert('ddd');
			})
			.success(function(result) {
			alert(result);
			$('.output').html(houseTypeId+"<br>"+houseTypeName);

			s="";
			rs={};
			roomStyles=[];
			roomId=0;

			})
			.error(function() { alert("error"); })
			.complete(function() { alert("complete");
			});
		});
	});

</script>
	<div class="roomInfo">
				<p id="desc5">
			名称：
			<br>
			<select id="type">
				<option value ="1">卧室</option>
				<option value ="2">客厅</option>
				<option value ="3">卫生间</option>
				<option value ="4">厨房</option>
				<option value ="5">走廊</option>
				<option value ="6">储藏室</option>
				<option value ="7">阳台</option>
				<option value ="8">玄关</option>
			</select>
			<br>
		</p>
<table width="1219" border="1">
  <tr>
    <th colspan="2" scope="row"><div align="left">描述：</div></th>
    <td colspan="8"><input type="text" id="desc" width='100%'/></td>
  </tr>
  <tr>
    <th colspan="2" scope="row"><div align="left">地板</div></th>
    <td><div align="center">前墙</div></td>
    <td>		<input type="radio" id="rdoFrontWall" name="rdoFrontWall" value="1">
		有
		  <input type="radio" id="rdoFrontWall" name="rdoFrontWall" value="0">
		无</td>
    <td><div align="center">后墙</div></td>
        <td>		<input type="radio" id="rdoBackWall" name="rdoBackWall" value="1">
		有
		  <input type="radio" id="rdoBackWall" name="rdoBackWall" value="0">
		无</td>
    <td><div align="center">左墙</div></td>
        <td>		<input type="radio" id="rdoLeftWall" name="rdoLeftWall" value="1">
		有
		  <input type="radio" id="rdoLeftWall" name="rdoLeftWall" value="0">
		无</td>
    <td><div align="center">右墙</div></td>
        <td>		<input type="radio" id="rdoRightWall" name="rdoRightWall" value="1">
		有
		  <input type="radio" id="rdoRightWall" name="rdoRightWall" value="0">
		无</td>
  </tr>
  <tr>
    <th width="48" scope="row"><div align="left">长：</div></th>
    <td width="168"><input name="text2" type="text" id="width"/></td>
    <td width="65"> 长：</td>
    <td width="168"><input type="text" id="fwwidth" /></td>
    <td width="48">长：</td>
    <td width="158"><input type="text" id="bwwidth" /></td>
    <td width="48">厚：</td>
    <td width="158"><input type="text" id="lwwidth" value="2" disabled/></td>
    <td width="48">厚：</td>
    <td width="158"><input type="text" id="rwwidth" value="2" disabled/></td>
  </tr>
  <tr>
    <th scope="row"><div align="left">宽</div></th>
    <td><input type="text" id="depth"/></td>
    <td>厚</td>
    <td><input type="text" id="fwthick"  value="2" disabled/></td>
    <td>厚</td>
    <td><input type="text" id="bwthick"  value="2" disabled/></td>
    <td>长</td>
    <td><input type="text" id="lwthick"  /></td>
    <td>长</td>
    <td><input type="text" id="rwthick"  /></td>
  </tr>
    <tr>
    <th scope="row"><div align="left">X坐标</div></th>
    <td><input name="text3" type="text" id="X" />    </td>
    <td>X坐标</td>
    <td><input type="text" id="fwX" /></td>
    <td>X坐标</td>
    <td><input type="text" id="bwX" /></td>
    <td>X坐标</td>
    <td><input type="text" id="lwX" /></td>
    <td>X坐标</td>
    <td><input type="text" id="rwX" /></td>
  </tr>
   <tr>
    <th scope="row"><div align="left">Z坐标</div></th>
    <td><input type="text" id="Z"/></td>
    <td>Z坐标</td>
    <td><input type="text" id="fwZ"/></td>
    <td>Z坐标</td>
    <td><input type="text" id="bwZ"/></td>
    <td>Z坐标</td>
    <td><input type="text" id="lwZ"/></td>
    <td>Z坐标</td>
    <td><input type="text" id="rwZ"/></td>
  </tr>
   <tr>
    <th scope="row"><div align="left">Y坐标</div></th>
    <td><input type="text" id="Y" value="1"/></td>
    <td>Y坐标</td>
    <td><input type="text" id="fwY" value="101"/></td>
    <td>Y坐标</td>
    <td><input type="text" id="bwY" value="101"/></td>
    <td>Y坐标</td>
    <td><input type="text" id="lwY" value="101"/></td>
    <td>Y坐标</td>
    <td><input type="text" id="rwY" value="101"/></td>
  </tr>
  
</table>
<div align="left">房屋描述：<input type="text" id="descHouse" width='100%'/></td>
  </div>
	</div>
	
	<div>
		<input type='button' id="addRoom" value="确定把此房间加入户型图"/>
		<br>
		<input type='button' id='ok' value="存储入数据库"/>
	</div>
<div class='output' height=20px></div>